<template>
  <div class="wrap">
    <div class="search-wrap">
      <van-search v-model="value" placeholder="搜索鲜花、蛋糕、礼品" />
    </div>
    <div class="slider-content">
      <div class="slider-bar">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item :title="cate.name" v-for="cate in cates" :key="cate.id" @click="listChange(cate.id)"/>
        </van-sidebar>
      </div>
      <div class="empty" v-show="!recGoods.length">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F11712326.s21i-11.faiusr.com%2F2%2FABUIABACGAAgpfm_wQUohqX7ugEw2AQ4kAM.jpg&refer=http%3A%2F%2F11712326.s21i-11.faiusr.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627195351&t=f774ee335712e551d6ea35231a5aef4a" alt="">
      </div>
      <div class="slider-right">
        <div class="slider-right-content">
          <div class="recommend-content" v-for="item in recGoods" :key="item.id" @click="toDetails(item.id)">
            <img :src="item.pic" alt />
            <div class="recommend-right">
              <p class="name">{{item.name}}</p>
              <p class="desc">{{item.characteristic ? item.characteristic : '暂无描述' | filterDesc}}</p>
              <div class="price">
                <p>&yen;{{item.minPrice}}</p>
                <van-icon name="add-o" size="20" @click.stop="addToCart(item.id)"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <tabbar />
  </div>
</template>

<script>
import { fetchCates, fetchRecGoods, addCart } from '@api'
import Tabbar from '@components/Tabbar'
import { isLogin } from '@utils'
import { Toast } from 'vant'
export default {
  components: {
    Tabbar
  },
  data () {
    return {
      activeKey: 0,
      cates: [],
      value: '',
      recGoods: []
    }
  },
  created () {
    this.fetchCates()
    this.fetchRecGoods()
    this.addToCart()
  },
  filters: {
    filterDesc (val) {
      if (val.length > 10) {
        return val.substr(0, 10) + '...'
      } else {
        return val
      }
    }
  },
  methods: {
    addToCart (id) {
      if (isLogin()) {
        addCart({
          goodsId: id,
          number: 1,
          // 正常情况下在请求头中加token，此接口特殊
          token: localStorage.getItem('token') || ''
        }).then(res => {
          if (res.data.code === 0) {
            this.$store.commit('cart/init_cart_info', {
              items: res.data.data.items,
              total: res.data.data.price
            })
            Toast({
              type: 'success',
              message: '加入成功',
              duration: 1000
            })
          }
        })
      } else {
        Toast({
          message: '请先登录',
          duration: 2000,
          onClose: () => {
            this.$router.push({
              path: '/login',
              query: {
                from: '/home'
              }
            })
          }
        })
      }
    },
    toDetails (id) {
      this.$router.push({
        path: '/details',
        query: {
          id
        }
      })
    },
    listChange (id) {
      this.fetchRecGoods(id)
    },
    fetchCates (id) {
      fetchCates({
        id
      }).then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    },
    fetchRecGoods (id) {
      this.recGoods = []
      fetchRecGoods({
        categoryId: id
      }).then(res => {
        if (res.data.code === 0) {
          this.recGoods = res.data.data.result
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  .search-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
  }
  .slider-content {
    padding-top: 53px;
    display: flex;
    .slider-bar {
      position: fixed;
      top: 53px;
      left: 0;
      z-index: 11;
    }
    .empty{
      img{
        width: 100%;
        height: 100%;
        padding-left: 70px;
      }
    }
    .slider-right {
      flex: 1;
      padding-left: 70px;
      padding-bottom: 50px;
      .recommend-content{
      display: flex;
      margin-top: 15px;
      width: 100%;
      img{
        width: 120px;
        height: 120px;
        margin: 0 0 0 10px;
      }
      .recommend-right{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0 15px;
        .name{
          margin-top: 10px;
          color: rgb(13, 26, 206);
          font-size: 14px;
          font-weight: bold;
        }
        .desc{
          font-size: 12px;
          margin:30px 0 35px;
        }
        .price{
          display: flex;
          align-items: center;
          >p{
            color: #f43;
            font-weight: bold;
            flex: 1;
          }
          .van-icon-add-o{
            color: red;
          }
        }
      }
    }
    }
  }
}
</style>
